<template>
	<div style="margin-right: 10px;" v-if="interval !== '0'">
		<el-input size="" v-if="type === 'string'" v-model="innerValue" placeholder="请输入内容"></el-input>
		<el-input size="" v-if="type === 'number'" type="number" v-model="innerValue"
			placeholder="请输入内容"></el-input>
		<div v-if="type === 'dec'">
			<el-input-number size="" v-model="innerValue" :min="0" label="描述文字"></el-input-number>
			<span style="padding-left: 10px;">元</span>
		</div>
		<el-select size="" v-if="type === 'select'" v-model="innerValue" placeholder="请选择">
			<el-option label="男" value="0"></el-option>
			<el-option label="女" value="1"></el-option>
		</el-select>
		<div v-if="type === 'datetime'">
			<el-date-picker size="" v-if="interval === 'in'" v-model="innerValue" type="daterange"
				range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
			</el-date-picker>
			<el-date-picker size="" v-else v-model="innerValue" align="right" type="date" placeholder="选择日期"
				:picker-options="pickerOptions">
			</el-date-picker>
		</div>
		<sc-table-select v-if="type == 'sc-table-select'" v-model="value" :apiObj="apiObj" :table-width="200" multiple clearable collapse-tags collapse-tags-tooltip :props="props" @change="change">
			<template #header="{form, submit}">
				<el-form :inline="true" :model="form">
					<el-form-item>
						<el-input :value="searchVal" placeholder="请输入搜索关键词"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submit">查询</el-button>
					</el-form-item>
				</el-form>
				<!-- <el-alert title="自定义FORM插糟 传递了form对象和提交方法" type="info" /> -->
			</template>
			<el-table-column prop="id" label="ID" width="180"></el-table-column>
			<el-table-column prop="product_title" label="名称" width="100"></el-table-column>
			<el-table-column prop="time" label="创建时间"></el-table-column>
		</sc-table-select>
	</div>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: "string"
			},
			interval: {
				type: String,
				default: ""
			},
			value: {
				type: [String, Number],
				default: ""
			}
		},
		data() {
			return {
				innerValue: "",
				searchVal: "",
				apiObj: this.$API.system.goods.list,
				props: {
					label: 'product_title',
					value: 'id',
					keyword: "keyword"
				},
				value: [],
			}
		},
		watch: {
			innerValue(newVal) {
				this.$emit('update:modelValue', newVal)
			},
			interval() {
				this.innerValue = ""
			}
		},
		computed: {
			model: {
				get() {
					return this.value
				},
				set(value) {
					this.$emit('update:modelValue', value)
				}
			}
		},
		methods: {
			change(val){
				this.$message('change事件，返回详情查看控制台')
				console.log(val)
			}
		}
	}
</script>
